<template>
    <div class="box-column container-grid">
        <ux-header-search
            ref="searchHeader"
            v-bind="enquiryData"
            :btnsData="{ permissionsData }"
            @search="onQueryClick"
        ></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid
                v-bind="tableConfig"
                :data="dataStore.data"
                :columns="table.columns"
            >
                <template v-slot:operate="{ row }">
                    <ux-btn-group
                        :btns="table.btns"
                        :data="{ row, permissionsData }"
                    ></ux-btn-group>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page"
                :page-size="dataStore.proxy.pageSize"
                :page-sizes="dataStore.pageSizes"
                :total="dataStore.pagination.total"
                :layout="'total, sizes, prev, pager, next, jumper'"
            ></el-pagination>
        </div>
        <dialogForm
            ref="dialogForm"
            @submitSuccess="onSubmitSuccess"
            @closeDialog="onCloseDialog"
        ></dialogForm>
        <dialogOperation
        ref="dialogOperation"
        @submitSuccess="onSubmitSuccess"
        @closeDialog="onCloseDialog"
    ></dialogOperation>
    </div>
</template>

<script  lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Action, State } from 'vuex-class';
import { mixinTableStore } from '@/mixin/table/Store';
import { mixinTableHeader } from '@/mixin/table/Header';
import { mixinTableOperation } from '@/mixin/table/Operation';
import { mixinDialogFormParent } from '@/mixin/dialog/FormParent';
import { mixinAccess } from '@/mixin/Access';
import dialogForm from './Edit.vue';
import dialogOperation from './Operation.vue';
@Component({
    name: 'equipmentLadderTable',
    mixins: [
        mixinTableStore,
        mixinTableHeader,
        mixinTableOperation,
        mixinDialogFormParent,
        mixinAccess
    ],
    components: {
        dialogForm, dialogOperation
    }
})
export default class equipmentLadderTable extends Vue {
    @Action('equipmentLadder/del') itemDel: any;
    @Action('equipmentLadder/list') getList: any;
    @State((state) => state.sharing.tkLayer) tkLayerData: any;
    @State((state) => state.sharing.netType) ladderNetData: any;
    @State((state) => state.sharing.onLineStatusData) onLineStatusData: any;
    table: any = {
        btns: [
            {
                label: '编辑',
                condition: ['permissionsData.edit'],
                handleClick: (this as any).onEditClick
            },
            {
                label: '删除',
                condition: ['permissionsData.del'],
                handleClick: (this as any).onDelClick
            },
            {
                label: "配置",
                condition: [
                    "permissionsData.ladderConfTable"
                ],
                enabledCondition: [
                    function ({ row }) {
                        return row.tk_layer == 1;
                    }
                ],
                handleClick: this.onParamClick
            },
            {
                label: '梯控指令',
                condition: [
                    'permissionsData.remote'
                ],
                param: 'dialogOperation',
                handleClick: (this as any).onEditClick
            }
        ],
        // 列配置
        columns: [
            {
                width: 70,
                type: 'seq',
                title: '序号'
            },
            {
                width: 150,
                title: '梯控名称',
                field: 'door_name'
            },
            {
                width: 150,
                title: '梯控guid',
                field: 'door_guid'
            },
            {
                width: 80,
                title: '楼层数量',
                field: 'floor_count',
                formatter: function ({ cellValue }) {
                    return cellValue < 1 ? '' : cellValue + "F";
                }
            },
            {
                width: 80,
                title: '梯控分层',
                field: 'tk_layer',
                params: 'tkLayerData',
                formatter: (this as any).formatterData
            },
            {
                width: 90,
                title: '设备联网',
                field: 'line_way',
                params: 'ladderNetData',
                formatter: (this as any).formatterData
            },
            {
                title: '在线状态',
                field: 'door_status',
                width: 80,
                params: 'onLineStatusData',
                formatter: (this as any).formatterData,
                className: function ({ row }) {
                    return ['', 'green ', 'red'][row.door_status];
                }
            },
            {
                width: 90,
                title: '人脸乘梯',
                field: 'is_face',
                formatter: function ({ cellValue }) {
                    return ['', '支持', '不支持'][cellValue];
                },
                className: function ({ row }) {
                    return ['', 'green ', 'red'][row.is_face];
                }
            },
            {
                width: 90,
                title: '密码乘梯',
                field: 'is_temp_pwd',
                formatter: function ({ cellValue }) {
                    return ['', '支持', '不支持'][cellValue];
                },
                className: function ({ row }) {
                    return ['', 'green ', 'red'][row.is_temp_pwd];
                }
            },
            {
                width: 90,
                title: '二维码乘梯',
                field: 'is_qrcode_active',
                formatter: function ({ cellValue }) {
                    return ['', '支持', '不支持'][cellValue];
                },
                className: function ({ row }) {
                    return ['', 'green ', 'red'][row.is_qrcode_active];
                }
            },
            {
                width: 90,
                title: '刷卡乘梯',
                field: 'is_id_card',
                formatter: function ({ cellValue }) {
                    return ['', '支持', '不支持'][cellValue];
                },
                className: function ({ row }) {
                    return ['', 'green ', 'red'][row.is_id_card];
                }
            },
            {
                title: '授权数量',
                width: 90,
                field: 'scrip_count'
            },
            {
                title: '创建时间',
                field: 'created_at'
            },
            {
                showOverflow: 'ellipsis',
                fixed: 'right',
                title: '操作',
                slots: { default: 'operate' },
                width: 260
            }
        ]
    };
    // 查询头下拉数据配置
    headerSelectList: any = [
        {
            dataName: 'tkLayerData',
            keyName: 'tk_layer'
        },
        {
            dataName: 'onLineStatusData',
            keyName: 'door_status'
        }
    ];

    // 查询头配置
    enquiryData: any = {
        searchBtn: {
            condition: ['permissionsData.query']
        },
        fields: [
            {
                field: 'door_name',
                label: '梯控名称'
            },
            {
                field: 'door_guid',
                label: '梯控guid'
            },
            {
                label: '在线状态',
                fieldType: 'select',
                field: 'door_status'
            }
        ],
        btns: [
            {
                label: '新增',
                class: 'btn-blue',
                icon: 'el-icon-plus',
                condition: ['permissionsData.add'],
                handleClick: (this as any).onAddClick
            }
        ]
    };
    onParamClick({ row }) {
        (this as any).go("ladderConfTable", {
            id: row.door_sn,
            isEdit: true,
            data: row
        }, { isBase: true });
    }
}
</script>
